<template>
    <div class="mainV">
        <img class="mainBg" src="@/assets/mb.png" alt="">
        <div class="mainT">
            <p>{{ orgName }}</p>
            <p>{{ date }}</p>
        </div>
        <div class="mainc">
            <div class="maincl">
                <div :class="['maincli', dept == i.id ? 'maincliA' : '']" @click="changeDept(i)"
                    v-for="(i, o) in deptList" :key="o">{{ i.deptName }}</div>
            </div>
            <div class="maincr">
                <div class="maincri" v-for="(i, o) in docList" :key="o" @click="chooseDoctor(i)">
                    <img :src="i.image" alt="">
                    <div class="maincric">
                        <p><b>{{ i.name }}</b> <span>{{ i.cert }}</span></p>
                        <p>{{ i.intro }}</p>
                    </div>
                </div>
            </div>
        </div>

        <div class="tabs">
            <div class="tab tabA">
                <i class="el-icon-s-finance"></i>
                <p>问诊预约</p>
            </div>
            <div class="tab" @click="openResevation">
                <i class="el-icon-s-order"></i>
                <p>我的预约</p>
            </div>
        </div>
    </div>
</template>

<script>
import { fetchPost, fetchGet } from '@/api/request'
export default {
    data() {
        return {
            deptList: [],
            docList: [],
            orgId: null,
            dept: null,
            doctorId: null,
            date: null,
            orgName: null,
        }
    },
    mounted() {
        this.date = this.$route.query.date
        this.orgId = this.$route.query.orgId
        this.orgName = this.$route.query.orgName
        fetchGet('/wz/hosp/wzHospDept/queryByOrgId', { pageNo: 1, pageSize: 999, orgId: this.orgId }).then(res => {
            this.deptList = res.result;
        })
    },
    methods: {
        disabledDate(time) {
            return time.getTime() < Date.now() - 8.64e7;
        },
        chooseDoctor(item) {
            this.$router.push({
                path: '/list', query: {
                    orgId: this.orgId,
                    dept: this.dept,
                    date: this.date,
                    doctorId: item.id,
                    orgName: this.orgName,
                    deptName: this.deptList.find(i => i.id == this.dept).deptName,
                    doctorName: this.docList.find(i => i.id == item.id).name,
                }
            })
        },
        openResevation() {
            this.$router.push('/reservation')
        },
        changeDept(item) {
            if (this.dept == item.id) return;
            this.dept = item.id
            fetchGet('/wz/doctor/wzDoctorInfo/queryByDeptIdAndDate', { pageNo: 1, pageSize: 999, date: this.date, deptId: item.id }).then(res => {
                this.docList = res.result;
            })
        },
    },
}
</script>
<style lang="scss" scoped>
.mainV {
    width: 100vw;
    min-height: 100vh;
    flex-direction: column;
    
    padding-top: 30px;

    .mainc {
        position: relative;
        z-index: 8;
        display: flex;
        width: 100vw;
        border-top: 2px solid #038069;
        box-sizing: border-box;
        height: calc(100vh - 192px);

        .maincl {
            width: 40vw;
            overflow-y: auto;
            height: 100%;

            .maincli {
                height: 36px;
                line-height: 36px;
                background-color: #fff;
                border-radius: 6px;
                box-shadow: 0 0 3px #ccc;
                width: 38vw;
                text-align: center;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
                margin: 5px 1vw 10px;
            }

            .maincliA {
                background-color: #67C23A;
                color: #fff;
            }
        }

        .maincr {
            height: 100%;
            width: 60vw;
            border-left: 2px solid #038069;
            box-sizing: border-box;
            overflow-y: auto;

            .maincri {
                background-color: #fff;
                box-shadow: 0 0 3px #ccc;
                border-radius: 6px;
                margin: 5px 1vw 10px;
                display: flex;
                align-items: center;
                justify-content: space-around;

                img {
                    width: 60px;
                    height: 60px;
                    border-radius: 50%;
                }

                .maincric {
                    display: flex;
                    height: 60px;
                    flex-direction: column;
                    justify-content: space-around;

                    p {
                        font-size: 14px;
                        display: flex;
                        align-items: center;

                        b {
                            width: 60px;
                            font-size: 16px;
                            display: inline-block;
                        }

                        span {
                            display: inline-block;
                            width: calc(60vw - 130px);
                            text-overflow: ellipsis;
                            overflow: hidden;
                            white-space: nowrap;
                        }

                        &:last-of-type {
                            font-size: 13px;
                            width: calc(60vw - 80px);
                            overflow: hidden;
                            text-overflow: ellipsis;
                            -webkit-line-clamp: 2;
                            display: -webkit-box;
                            -webkit-box-orient: vertical;
                        }
                    }
                }
            }
        }
    }


}

.mainT {
    width: 100%;
    color: #038069;
    font-size: 26px;
    margin: 0 auto 20px;
    font-weight: bold;
    text-align: center;

    p {
        margin-bottom: 10px;
        width: 100vw;
        text-overflow: ellipsis;
        overflow: hidden;
        white-space: nowrap;
    }
}

.mainBg {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    opacity: .2;
    z-index: 1;
}

.tabs {
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100vw;
    z-index: 9;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: space-around;
    box-shadow: 0 0 8px #ccc;
    background-color: #fff;

    .tab {
        width: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        color: #888;

        i {
            font-size: 22px;
            margin-bottom: 5px;
        }

        p {
            font-size: 14px;
        }
    }

    .tabA {
        color: #67C23A;
        border-right: 1px solid #ccc;
    }
}
</style>